@import "demo";

/*  reset font family   */
.p_chinese{
    font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    font-size: 16px;
}
.p_english{
    font-family: Vani, Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    font-size: 14px;
}
/*  fault   */ 
.icon-arrow-right{
    font-size: 20px;
    color: #828181;
} 


/*  main part   */
.main{
    @include box_mod(inherit, 1401px,#e7e9ec);
    background-image:url("../img/show_bg_1280x735.png"),url("../img/head_phone_558x493.png");
    background-repeat: no-repeat, no-repeat;  
    background-position: 0 0, -153px 100%;
    background-size: 100% 552px, 558px 493px;
    box-sizing: border-box;
    padding-top: 59px;
    padding-left: 149px;

    .left_bar{
        // @extend .side_bar;
        /*  side bar    */
        @include box_mod(224px, 323px,#f3f2f2);
        @include recode_inline_block;
        box-sizing: border-box;
        padding-top: 27px;
        font-size: 0;

        .tag{
            @include box_mod(inherit, 30px);
            @include recode_inline_block;
            margin-bottom: 10px;
            cursor: pointer;
            .tag_icon{
                @include box_mod(30px, 30px);
                @include recode_inline_block;
                box-sizing: border-box;
                margin-left: 7px;
                padding-top: 5px;
                padding-left: 10px;
                padding-bottom: 5px;
            }
            p{
                display: inline-block;
                line-height: 30px;
                color: #7c7979;
            }
            .p_chinese{
                margin-right: 6px;
            }
        }
        .bar_tel_area{
            @include box_mod(inherit, 40px);
            overflow: hidden;
            margin-top: 40px;
            text-align: center;
            .pic_tel{
                @include box_mod(16px, 16px);
                @include recode_inline_block;
                .icon-phone{
                    color: #7c7c7c;
                }
            }
            .num_tel{
                @include box_mod(120px, inherit);
                @include recode_inline_block;
                margin-left: 5px;
                p{
                    text-align: left;
                    font-size: 12px;
                    line-height: 20px;
                    font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                    color: #7c7c7c;
                }
            }
        }


        .tag:hover{
            background-color: #58636d;
        }
        .tag:hover>p{
            color: white;
        }
        .tag:hover>.tag_icon>.iconfont{
            color: white;
        }
    }

    .main_right{
        @include box_mod(681px, 1232px);
        @include recode_inline_block;
        margin-left: 44px;
        .mr_title{
            @include box_mod(652px, 53px);
            margin: 0 auto 44px auto;
            box-sizing: border-box;
            padding-top: 32px;
            border-bottom: 2px solid white;
            p{
                font-size: 26px;
                font-weight: bolder;
                color: white;
            }
            .p_english{
                line-height: 16px;
            }
            .p_chinese{
                line-height: 10px;
            }

        }
        .main_box{
             @include box_mod(inherit, 1129px,white);
             box-sizing: border-box;
             padding: 27px 11px 0 13px;
            //  .main_header+.main_area*3+.main_footer
            .main_header{
                @include box_mod(602px,21px);
                margin: 0 auto 39px auto;
                border-bottom: 1px solid #c4c4c5;
                p{
                    font-size: 14px;
                    line-height: 20px;
                }
                P:last-child{
                    font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                }
            }
            .main_area{
                @include box_mod(652px, 287px);
                margin-bottom: 38px;

                .m_a_title{
                    text-align: center;
                    @include box_mod(inherit, 20px);
                    p{
                        @extend .p_chinese;
                        font-weight: bolder;
                        line-height: 20px;
                    }

                }
                .m_a_photo{
                    @include box_mod(652px, 210px);
                    overflow: hidden;
                    margin-top: 15px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .m_a_text{
                    margin-top: 7px;
                    width: inherit;
                    p{
                        @extend .p_chinese;
                        font-size: 12px;
                        line-height: 18px;
                    }
                }  
                .p_photo_detail{
                    text-align: center;
                    p{
                        @extend .p_chinese;
                        font-size: 12px;
                        font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                    }
                }    
                
            }
            .main_footer{
                @include box_mod(652px,58px);
                box-sizing: border-box;
                padding-top: 5px;
                .button_area{
                    @include box_mod(inherit, 21px);
                    text-align: center;
                    .page_button{
                        @include box_mod(17px,21px);
                        box-sizing: border-box;
                        @include recode_inline_block;
                        text-align: center;
                        margin-right: 3px;
                        cursor: pointer;
                        border: 1px solid #d2d2d2;

                        p{
                            @extend .p_chinese;
                            font-size: 12px;
                            font-weight: bold;
                            line-height: 21px;
                        }

                    }
                    .page_button_next{
                        @extend .page_button;
                        width: 58px;
                    }
                    .page_button_last{
                        @extend .page_button;
                        width: 40px;
                    }
                    .page_button_current{
                        border-color: #6b6b6b;
                        background-color: #828c93;
                        p{color: white;}
                    }

                    &:hover .page_button{
                        border-color: #d2d2d2;
                        background-color: white;
                        p{color: black;}
                    }

                    .page_button:hover{
                        border-color: #6b6b6b;
                        background-color: #828c93;
                        p{
                            color: white;
                        }
                    }

                }
            }
        }
    }
}




